<template>
       <div class="films">
            <button class="btn" @click="getLocation">{{city}}</button>
            <img class="pic" src="@/assets/top.jpg" alt="">
            <div :class="[isFixed?'nav':'']">
                <router-link to="/tab/films/nowPlaying" class="link">正在热映</router-link>
                <router-link to="/tab/films/comingSoon" class="link">即将上映</router-link>
            </div>
            <router-view></router-view>
        </div>
</template>

<script>
    export default {
        name:'Films',
        data() {
            return {
                city:"",
                isFixed:false
            }
        },
        created(){
            let data = {
                key: "ZM2BZ-DMHCW-GYQR3-RIV6C-5VRPE-WLBL2"
            };
            let url = "https://apis.map.qq.com/ws/location/v1/ip"; //这个就是地理位置信息的接口
            data.output = "jsonp";
            this.$jsonp(url, data).then(res => {
                 var city = res.result.ad_info.city
                 localStorage.setItem('city',city)
            })
            .catch(error => {
                    console.log(error)
            })
        },
        mounted() {
            this.city = localStorage.getItem('city')
            window.addEventListener('scroll',this.handleScroll)
        },
        methods: {
            getLocation(){
                this.$store.commit('setState',false)
                setTimeout(()=>{
                    this.$store.commit('setState',true)
                    this.$router.push('/city')
                },500)
            },
            handleScroll(){
                var scrollTop = document.documentElement.scrollTop
                if(scrollTop>200){
                    this.isFixed = true
                }else{
                    this.isFixed = false
                }
            }
        },
        destroyed(){
            window.removeEventListener('scroll',this.handleScroll)
        }
       
    }
</script>

<style scoped>
.films{
    position: relative;
}
.btn{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: 1px solid #666;
    border-radius: 8vw;
    top: 3vw;
    left: 3vw;
    font-size: 4.7vw;
    padding:1vw 2vw;
}
.pic{
    width: 100%;
    margin-bottom: 5vw;
}
.link{
    display: inline-block;
    width: 50%;
    text-align: center;
    text-decoration: none;
    color: #333;
}
.router-link-active{
    color: #FF5F16;
}
.nav{
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: white;
    z-index: 100;
}
</style>